<template>
  <div class="route-detail">
    <headers></headers>
    
    <!-- 图片轮播区域 -->
    <div class="hero-section">
      <el-carousel 
        height="500px"
        :interval="4000"
        arrow="hover"
        indicator-position="outside"
      >
        <el-carousel-item 
          v-for="(item, index) in getImages" 
          :key="index"
          class="carousel-item"
        >
          <div 
            class="carousel-image"
            :style="{ backgroundImage: `url(${item})` }"
          ></div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 内容区域 -->
    <div class="content-section">
      <div class="content-container">
        <!-- 标题区域 -->
        <div class="title-section">
          <h1 class="route-title">{{ info.name }}</h1>
          <div class="action-buttons">
            <el-tooltip 
              :content="flag ? '取消收藏' : '添加收藏'" 
              placement="top"
            >
              <el-button
                :type="flag ? 'warning' : 'success'"
                :icon="flag ? 'el-icon-star-off' : 'el-icon-star-on'"
                circle
                @click="flag ? removeSysFavor() : saveSysFavor()"
                :loading="favorLoading"
              ></el-button>
            </el-tooltip>
            
            <el-button
              type="primary"
              icon="el-icon-share"
              circle
              @click="shareRoute"
            ></el-button>
          </div>
        </div>

        <!-- 路线详情 -->
        <div class="route-content">
          <div class="content-wrapper" v-html="info.content"></div>
        </div>

        <!-- 相关信息 -->
        <div class="info-cards">
          <el-card class="info-card">
            <div slot="header">
              <i class="el-icon-location"></i>
              路线特点
            </div>
            <p>{{ info.features || '暂无特点描述' }}</p>
          </el-card>

          <el-card class="info-card">
            <div slot="header">
              <i class="el-icon-time"></i>
              行程安排
            </div>
            <p>{{ info.schedule || '暂无行程安排' }}</p>
          </el-card>

          <el-card class="info-card">
            <div slot="header">
              <i class="el-icon-warning-outline"></i>
              注意事项
            </div>
            <p>{{ info.notices || '暂无注意事项' }}</p>
          </el-card>
        </div>
      </div>
    </div>

    <bottoms></bottoms>
  </div>
</template>

<script>
import { getSysLineById, getSysFavor, saveSysFavor, removeSysFavor } from '../../api/api'
import headers from '@/components/header'
import bottoms from '@/components/bottom'

export default {
  name: 'RouteDetail',
  components: {
    headers,
    bottoms
  },
  data() {
    return {
      id: "",
      info: {
        content: "",
        name: "",
        images: ""
      },
      favor: {},
      flag: false,
      favorLoading: false
    }
  },
  computed: {
    getImages() {
      return this.info.images ? this.info.images.split(',') : []
    }
  },
  methods: {
    async removeSysFavor() {
      try {
        this.favorLoading = true
        const res = await removeSysFavor({ids: this.favor.id})
        if (res.code === 1000) {
          this.$message.success('已取消收藏')
          await this.getSysFavor()
        }
      } catch (error) {
        this.$message.error('操作失败，请重试')
      } finally {
        this.favorLoading = false
      }
    },
    async saveSysFavor() {
      try {
        this.favorLoading = true
        const res = await saveSysFavor({ lineId: this.id })
        if (res.code === 1000) {
          this.$message.success('收藏成功')
          await this.getSysFavor()
        }
      } catch (error) {
        this.$message.error('收藏失败，请重试')
      } finally {
        this.favorLoading = false
      }
    },
    async getSysLineById() {
      try {
        const res = await getSysLineById({id: this.id})
        if (res.code === 1000) {
          this.info = res.data
        }
      } catch (error) {
        this.$message.error('获取路线信息失败')
      }
    },
    async getSysFavor() {
      try {
        const res = await getSysFavor({id: this.id})
        this.flag = res.code === 1000
        if (this.flag) {
          this.favor = res.data
        }
      } catch (error) {
        this.flag = false
      }
    },
    shareRoute() {
      // 实现分享功能
      this.$message.info('分享功能开发中')
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.getSysFavor()
    this.getSysLineById()
  }
}
</script>

<style scoped>
.route-detail {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.hero-section {
  width: 100%;
  margin-bottom: 30px;
}

.carousel-item {
  width: 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.content-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.content-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 40px;
}

.title-section {
  padding: 30px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.route-title {
  margin: 0;
  font-size: 28px;
  color: #333;
}

.action-buttons {
  display: flex;
  gap: 15px;
}

.route-content {
  padding: 30px;
}

.content-wrapper {
  line-height: 1.8;
  color: #666;
  font-size: 16px;
}

.content-wrapper ::v-deep img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 20px 0;
}

.info-cards {
  padding: 0 30px 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.info-card {
  transition: transform 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
}

.info-card ::v-deep .el-card__header {
  padding: 15px 20px;
  font-weight: bold;
  color: #333;
}

.info-card ::v-deep .el-card__header i {
  margin-right: 10px;
  color: #409EFF;
}

.info-card p {
  margin: 0;
  line-height: 1.6;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .title-section {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .route-title {
    font-size: 24px;
  }

  .info-cards {
    grid-template-columns: 1fr;
  }
}
</style>